<template>
    <Modal v-model="modal" title="新增微信标签" :mask-closable="false" @on-cancel="cancel" width="800">
        <Form :rules="rules" ref="create" :model="params" >
            <Row type="flex" :gutter="24">
                <Col span="12">
                    <FormItem prop="tag_name" label="标签名称">
                        <Input type="text" v-model="params.tag_name" placeholder="请输入标签名称"></Input>
                    </FormItem>
                    <FormItem>
                        <p>已选中好友</p>
                        <div class="box">
                            <Tag v-for="(item,index) in params.tag_namearr" :key="index">{{item.label}}</Tag>
                            <!-- <Tag v-for="(item,index) in params.tag_namearr" :key="index" closable @on-close="handleClose(item,index)">{{label}}</Tag> -->
                        </div>
                    </FormItem>
                </Col>
                <Col span="12">
                    <!-- <FormItem>
                        <Input type="text" v-model="params.tag_name" placeholder="请输入微信号或昵称" clearable></Input>
                    </FormItem> -->
                    <FormItem>
                        <p>微信好友</p>
                        <div class="boxs">
                            <Tree v-if="show" :data="data" show-checkbox @on-check-change="checkchange"></Tree>
                        </div>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button type="primary" :loading="loading" @click="submitParams">保存</Button>
        </div>
    </Modal>
</template>
<script>
    import { customerwechatcontactlist } from "@/api/hqapi/indexone.js";
    import { mapState, mapMutations } from "vuex";
    export default {
        data() {
            return {
                modal: false,
                show: true,
                loading: false,
                params: { tag_name: '', tag_namearr: [], tag_idarr: [] },
                rules: { tag_name: [
                    { required: true, message: '请输入标签名', trigger: 'blur' },
                    {
                        required: true,
                        message: "请勿输入空格",
                        pattern: /^\S/,
                        trigger: "blur",
                    },
                    {
                        required: true,
                        message: "请勿输入空格",
                        pattern: /\S$/,
                        trigger: "blur",
                    },
                ] },
                data: [],
                wechat_id: ''
            }
        },
        computed: {
            ...mapState("power/export", ["wsIsConnect"]),
        },
        methods: {
            initial(wechat_id) {
                this.wechat_id = wechat_id
                this.params = { tag_name: '', tag_namearr: [], tag_idarr: [] }
                this.data = []
                this.askData(wechat_id)
            },
            askData(wechat_id) {
                customerwechatcontactlist({wechat_id}).then(res=>{
                    let data = []
                    for (let item of res.list) {
                        let children = {}
                        children.title = item.value
                        children.yes = false,
                        children.expand = true
                        children.value = item.value
                        children.children = []
                        for (let it of item.child) {
                            children.children.push({
                                yes: true,
                                title: it.remark_name||it.nickname,
                                value: it.friendid
                            })
                        }
                        data.push(children)
                        
                    }
                    this.data = data
                    this.modal = true
                })
            },
            checkchange(arr, e) {
                this.params.tag_namearr = []
                this.params.tag_idarr = []
                for (let item of arr) {
                    if (item.yes) {
                        this.params.tag_namearr.push({value: item.value,label: item.title})
                        this.params.tag_idarr.push(item.value)
                    }
                }
            },
            cancel() {
                this.modal = false
            },
            submitParams() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        this.loading = true
                        let params = {
                            MsgType: 'ContactLabelTask',
                            Content: {
                                WeChatId: this.wechat_id, // 商家所属微信号
                                AddList: this.params.tag_idarr.join(','),
                                LabelId: 0, // 标签id，0则新建标签（如存在同名标签则会失败）
                                LabelName: this.params.tag_name, // 标签名 id!=0 会设置为该标签名
                                taskId: new Date().getTime() * 10000 + parseInt(Math.random() * 10000)
                            }
                        }
                        if (this.wsIsConnect) {
                            this.$websocket.sendSock(params);
                            setTimeout(()=>{
                                this.modal = false
                                this.loading = false
                                this.$emit('askData')
                            },3000)
                        } else {
                            this.$Message.error("ws未连接上");
                        }
                    }
                })
            },
        },
    }
</script>
<style lang="less" scoped>
.box{
    border: 1px solid #dcdee2;
    max-height: 300px;
    min-height:100px;
    padding: 8px;
    overflow: auto;
}
.boxs{
    border: 1px solid #dcdee2;
    max-height: 391px;
    min-height:191px;
    padding: 8px;
    overflow: auto;
}
</style>